<template>
  <el-row style="height: 70px;">
    <el-col class="top-col" :span="1" :offset="1">
      <el-image style="width: 110.35px; height: 63.75px;" :src="logo" />
    </el-col>
    <el-col class="top-col" :span="1" :offset="13">
      <CollapseMenu title="产品" :sub="menuProduct" :startSpan="20" />
    </el-col>
    <el-col class="top-col" :span="1" >
      <CollapseMenu title="美学" :sub="menuArt" :startSpan="30" />
    </el-col>
    <el-col class="top-col" :span="1" >
      <CollapseMenu title="品牌" :sub="menuBand" :startSpan="40" />
    </el-col>
    <el-col class="top-col" :span="1" >
      <CollapseMenu title="服务" :sub="menuService" :startSpan="45" />
    </el-col>
    <el-col class="top-col" :span="1" :offset="2">
      <CollapseSearch :startSpan="70"/>
    </el-col>
  </el-row>

</template>
<script>
import logo from '~/assets/logo.png'
import CollapseMenu from '~/components/CollapseMenu.vue';
import CollapseSearch from '~/components/CollapseSearch.vue';
export default {
  data() {
    return {
      logo,
      menuProduct:[
        {
          text: '烹饪',
          link: '#'
        },
        {
          text: '洗涤',
          link: '#'
        },
        {
          text: '冷藏',
          link: '#'
        },
        {
          text: '净饮',
          link: '#'
        },
        {
          text: '厨电',
          link:`#` 
        }
      ],
      menuArt:[
        {
          text: '产品系列',
          link: '#'
        },
        {
          text: '设计哲学',
          link: '#'
        },
        {
          text: '网上展厅',
          link: '#'
        },
      ],
      menuBand:[
        {
          text: '品牌理念',
          link: '#'
        },
        {
          text: '创新科技',
          link: '#'
        },
        {
          text: '品牌溯源',
          link: '#'
        }
      ],
      menuService:[
        {
          text: '售后服务',
          link: '#'
        },
        {
          text: '高端定制',
          link: '#'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.menu-bar {
  --ep-menu-hover-bg-color: var(--dg-bg-color);
  --el-menu-active-color:var(--dg-text-color-primary);
  --ep-menu-hover-text-color: var(--dg-text-color-primary);
  --ep-menu-bg-color: var(--dg-bg-color);
}

.top-col {
  padding-top: 10px;
  height: 60px;
}

.sub-block-menu{
  --ep-menu-text-color: var(--dg-text-color-primary);
  --ep-menu-item-font-size: 1rem;
  
}

.block-menu-popper{
  background-color: var(--dg-bg-color);
  --ep-menu-hover-bg-color: var(--dg-bg-color);
  --el-menu-active-color:var(--dg-text-color-primary);
  --ep-menu-hover-text-color: var(--dg-text-color-primary);
  --ep-menu-bg-color: var(--dg-bg-color);
  --ep-menu-text-color: var(--dg-text-color-primary);
  --ep-menu-item-font-size: 1rem;

}

.ep-menu--horizontal .ep-sub-menu{
  --ep-menu-text-color: var(--dg-text-color-primary);
  --ep-menu-item-font-size: 1rem;
}
.sub-menu {
  margin-right: auto;
}
.c-logo {
  margin-left: 75px; 
  margin-right: 89.85px;
}
</style>